import * as React from 'react';
import axios from 'axios';
import AppBar from '@mui/material/AppBar';
import { useState ,useEffect} from 'react';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import RefreshIcon from '@mui/icons-material/Refresh';
import ListSubheader from '@mui/material/ListSubheader';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import DraftsIcon from '@mui/icons-material/Drafts';
import SendIcon from '@mui/icons-material/Send';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';
import PersonIcon from '@mui/icons-material/Person';
import Box from '@mui/material/Box';
import HistoryIcon from '@mui/icons-material/History';
import Input from '@mui/material/Input';
const ariaLabel = { 'aria-label': 'description' };
export default function Content() {
  const [open, setOpen] = React.useState(true);
  const [rows1, setRows1] = useState(0);
  const [rows2, setRows2] = useState([]);
  useEffect(() => {
    axios.get('http://172.24.56.192:5000/index/tradehistory',{headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
              }})
                .then(function (response) {
                    // 这里是处理响应的代码
                  // var code = response['code']
                  setRows2(response.data['data']);
                  setRows1(response.data['num_info']);
                  console.log(rows2);
                  console.log(response.data);
                    
                })
                .catch(function (error) {
                    // 这里是处理错误的代码
                  // window.location.href="https://www.baidu.com/"
                    console.log(error);
                  
                });},[]);




  const handleClick = () => {
    setOpen(!open);
  };

  let count = 7;

  const componentInstances = [];
  for(let i = 0; i < rows1;i++)
  {
    componentInstances.push(
      <Grid container spacing={2}>
        
      <Grid item xs={2}>
      <ListItemButton>
        <Typography>
          {rows2[i]['trade_date']}
        </Typography>  
      </ListItemButton>
    </Grid>

    <Grid item xs={2}>
      <ListItemButton>
        <Typography>
        {rows2[i]['stock_name']}
        </Typography>  
      </ListItemButton>
    </Grid>
    <Grid item xs={2}>
    <ListItemButton>
        <Typography>
        {rows2[i]['stock_code']}
        </Typography>  
      </ListItemButton>
    </Grid>

    <Grid item xs={2}>
      <ListItemButton>
        <Typography>
        {rows2[i]['trade_vol']}
        </Typography>  
      </ListItemButton>
    </Grid>

    <Grid item xs={2}>
    <ListItemButton>
        <Typography>
        {rows2[i]['trade_type']}
        </Typography>  
      </ListItemButton>
    </Grid>

    <Grid item xs={2}>
    <ListItemButton>
        <Typography>
        {rows2[i]['trade_amt']}
        </Typography>  
      </ListItemButton>
    </Grid>
    </Grid>

    )
  }

  return (
    <Paper sx={{ maxWidth: 2000, margin: 'auto', overflow: 'hidden' }}>
          <List
            sx={{ width: '100%', maxWidth: 2000, bgcolor: 'background.paper' }}
            component="nav"
            aria-labelledby="nested-list-subheader"
          >
          
              <ListItemButton onClick={handleClick}>
                <ListItemIcon>
                  <HistoryIcon />
                </ListItemIcon>
                <ListItemText primary="My Trading Records" primaryTypographyProps={{color: 'primary'}}/>
                {open ? <ExpandLess /> : <ExpandMore />}
              </ListItemButton>
              <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" >
                <Grid container spacing={2}>
                <Grid item xs={2}> 
                  <ListItemButton>
                    <ListItemText primary="Date" primaryTypographyProps={{color: 'primary'}}/>  
                  </ListItemButton>
                </Grid> 
                
                

                <Grid item xs={2}> 
                  <ListItemButton>
                    <ListItemText primary="Stocks Name" primaryTypographyProps={{color: 'primary'}}/>  
                  </ListItemButton>
                </Grid> 
                <Grid item xs={2}>
                  <ListItemButton>
                    <ListItemText primary="Stock Code " primaryTypographyProps={{color: 'primary'}}/>  
                  </ListItemButton> 
                </Grid>  

                <Grid item xs={2}>
                  <ListItemButton>
                    <ListItemText primary="Trading quantity" primaryTypographyProps={{color: 'primary'}}/>  
                  </ListItemButton> 
                </Grid>  

                <Grid item xs={2}>
                  <ListItemButton>
                    <ListItemText primary="sell/purchase" primaryTypographyProps={{color: 'primary'}}/>  
                  </ListItemButton> 
                </Grid>  
                <Grid item xs={2}>
                  <ListItemButton>
                    <ListItemText primary="Transaction volume" primaryTypographyProps={{color: 'primary'}}/>  
                  </ListItemButton> 
                </Grid>  
                </Grid>



                    {componentInstances}
                  
                </List>
              </Collapse>
          </List>      
    </Paper>
  );
}